<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css3实用技巧一，透明边框，虚线边框，蚂蚁线边框</title>
  <style>
    body{
    }
  </style>
</head>
<body>
1、透明边框(IE9+)

<div class="div1">
  <span></span>
</div>
<style>
  .div1{
    width:220px;
    padding:10px;
    background: linear-gradient(55deg, #fb3 50%, #58a 50%);
  }
  .div1 span{
    display: block;

    width: 200px;
    height: 200px;

    border: 10px solid hsla(0, 0%, 100%, .5);
    background: white;
    background-clip: padding-box;
  }
</style>

技巧： background-clip:padding-box; 以padding内边缘参见背景颜色，背景颜色不会影响到border

<br><br><br><br><br><br><br><br>

2、虚线边框

<div id="div2">
  <div class="div1"></div>
  <div class="div2"></div>
</div>
<style>
  #div2 div{
    float: left;
    margin-right: 10px;
    width: 200px;
    height: 200px;
  }
  #div2 .div1{
    border: 10px dashed hsla(0,0%,0%,.5);
    background: #333;
    background-clip: padding-box;
  }
  #div2 .div2{
    padding: 1em;
    border: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg,
    red 0, red 1em,
    transparent 0,transparent 2em,  /*  transparent 透明     */
    #58a 0, #58a 3em,
    transparent 0, transparent 4em);
  }
  #div2:after{
    content: '';
    display: table;
    clear:both;
  }
</style>




<br><br><br><br><br><br><br><br>



3、图片边框(IE9+)
../fd.png
<div id="div3"></div>
<style>
  #div3{
    width: 200px;
    height:200px;

    padding:1em;
    border: 1em solid transparent;
    background:linear-gradient(white, white),
    url(../fd.png);
    background-size:50px;
    background-clip:padding-box,border-box;
    background-origin:border-box;
  }
</style>

<br><br><br><br><br><br><br><br>



3、多重边框(IE9+)
<br><br><br>
<div id="div4"></div>
<style>
  #div4{
    width: 200px;
    height:200px;

    margin-left: 100px;

    border:10px solid hsla(0,0%,100%,.5);

    background:#333;
    background-clip:padding-box; /*背景只出现在padding内部，不会影响到border*/
    box-shadow:
        0 0 0 10px #655,
        0 0 0 15px deeppink,   /*inset   内边距*/
        0 0 0 25px #6679ff,
        0 0 0 35px #ffff67,
        0 0 0 45px #02ff82,
        0 0 0 55px #f5faff;
  }


</style>
</body>
</html>